{% extends "public/layout.html" %}
{% block sidebar %}
{% include 'public/cmdb_left.html' %}
{% endblock %}


{% block custom_css %}
     <link rel="stylesheet" href="/static/css/dataTables.bootstrap.css" type="text/css" >
<style>
    #graphite_content{margin-top:20px;margin-left: 20px;margin-bottom:20px;}
    #graphite_key_input{width:400px;}
</style>

{% endblock %}

{% block body %}
<div class="right_content">
    <div id="graphite_head">
        <button type="button" class="btn btn-success" id="add_graphite_keys">添加keys</button>
    </div>


<div id="tab_box" >
    <table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>#</th>
          <th>key</th>
          <th>类型</th>
          <th>图形标题</th>
        </tr>
      </thead>
      <tbody>

            {% for key in graphite_keys %}
                <tr>
                <td> {{ loop.index }} </td>
                <td> {{ key.name }} </td>
                <td> {{ key.type }} </td>
                <td> {{ key.title }} </td>
                </tr>
            {% endfor %}

      </tbody>
    </table>
</div>


<div class="modal fade" id="add_graphite_keys_modal" aria-hidden="true">
	<div class="modal-dialog">
	    <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4>添加graphite keys</h4>
            </div>


<form class="form-horizontal" id="graphite_content">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">key 名称:</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" autocomplete="off" id="graphite_key_input" name="name" list="graphite_key_list" placeholder="key">
            <datalist id="graphite_key_list">

            </datalist>
        </div>
     </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">key 类型:</label>
        <div class="col-sm-8">
            <select class="form-control" name="key_type" id="key_type">
                <option name="si">si</option>
                <option name="binary">binary</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">图形标题:</label>
        <div class="col-sm-8">
        <input type="text" class="form-control" name="title"  id="graphite_title" placeholder="标题">
        </div>
     </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
        <button type="button" class="btn btn-primary" id="graphite_input_button">添加</button>
        </div>
    </div>
</form>


            <div class="modal-footer">
                <input class="btn btn-default" data-dismiss="modal" aria-hidden="true" type="button" value="取消">
            </div>

        </div>
    </div>
</div>
</div>

{% endblock %}
{% block js %}
    <script type="text/javascript" charset="utf8" src="/static/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf8" src="/static/js/dataTables.bootstrap.js"></script>

<script>
$(function(){
    $("#add_graphite_keys").click(function(){

        $.post("/monitor/ajax/graphite/get/all/keys/", function(data){
            keys = JSON.parse(data);

            console.log(keys)
            var html = ""
            $.each(keys, function(n, d){
                html += '<option value="'+ d +'">'

            });
            $("#graphite_key_list").html(html)

            $('#add_graphite_keys_modal').modal('show');
        })
    });
    $("#graphite_input_button").click(function(){
        graphite_key_input = $("#graphite_key_input");
        graphite_key_name = graphite_key_input.val();

        key_type_select = $("#key_type");
        key_type_value = key_type_select.val();

        graphite_title_input = $("#graphite_title");
        graphite_title_value = graphite_title_input.val()

        if (graphite_key_name == ""){
            swal("操作失败!", "graphite key 不能为空", "error");
        }

        if (graphite_title_value == ""){
            swal("操作失败!", "图形标题不能为空", "error");
        }

        $.post("/monitor/graphite/keys/add", { "name": graphite_key_name , "type":key_type_value, "title":graphite_title_value},
            function(data){
                if(data == "1"){
                    swal("操作成功!", "", "success");
                }else{
                    swal("操作失败", data, "error");
                }
            });
        graphite_key_input.val('');
        $('#add_graphite_keys_modal').modal('hide');
    });

    $('#table_id').DataTable({
        "language":{
                "lengthMenu":"每页 _MENU_ 条记录",
                "zeroRecords":"没有找到记录",
                "sInfo":"第 _PAGE_ 页 ( 总共 _PAGES_ 页),显示第 _START_ 至 _END_ 项(总共 _TOTAL_ 项目)",
                "infoEmpty":"无记录",
                "infoFiltered":"(从 _MAX_ 条记录过滤)",
                "sSearch":"搜索:",
                "oPaginate":{
                    "sFirst":"首页",
                    "sPrevious":"上一页",
                    "sNext":"下一页",
                    "sLast":"末页"
                }
            }
    });
})
</script>

{% endblock %}
